//---------------------获取数据并进行渲染------------------------------
function renderCategory() {
  axios.get('/my/category/list').then(res => {
    let { status, data } = res.data
    if (status === 0) {
      let str = ''
      data.forEach(item => {
        str += `
        <tr>
          <td>${item.name}</td>
          <td>${item.alias}</td>
          <td>
            <button type="button" class="layui-btn layui-btn-xs edit" data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}">编辑</button>
            <button type="button" data-id="${item.id}" class="del layui-btn layui-btn-xs layui-btn-danger">删除</button>
          </td>
        </tr > `
      })
      $('tbody').html(str)
    }
  })
}
renderCategory()

//-----------------------------删除功能----------------------------
$('tbody').on('click', 'button:contains("删除")', function () {
  // 获取id
  let id = $(this).data('id');
  // 询问是否要删除
  layer.confirm('你是否要删除吗？', function (index) {
    // do something
    // 点击确定，这个函数触发了
    // console.log(id);
    // 发送ajax请求进行删除操作
    axios.get(`/my/category/delete?id=${id}`).then(res => {
      let { status, message } = res.data;
      if (status === 0) {
        layer.msg(message);
        renderCategory();
      }
    });
    // 关闭弹层
    layer.close(index);
  });
});
//-------------------------添加功能的实线---------------------
let addIndex
// 一、点击添加分类，实现弹层
$('button:contains("添加类别")').click(function () {
  addIndex = layer.open({
    type: 1,
    title: '添加类别',
    content: $('#tpl-add').html(), // 内容在HTML中
    area: ['500px', '250px']
  })
})
// 二、提交表单数据，完成添加
// 注册表单的submit事件
$('body').on('submit', '#add-form', function (e) {
  e.preventDefault()
  // 规律：如果没有图片上传，一般都不使用FormData。
  // 具体：还得看接口要求
  let data = $(this).serialize() // 一定要检查input是否有正确的name属性
  // ajax提交数据，完成添加
  axios.post(`/my/category/add`, data).then(res => {
    let { data: { status, message } } = res
    if (status === 0) {
      layer.msg(message)
      renderCategory()
      layer.close(addIndex)
    }
  })
})
// ----------------------- 编辑 （点击 编辑，显示弹层） -----
let editIndex
$('body').on('click', 'button:contains("编辑")', function () {
  // 获取事件源上的 三个 data-xxx 属性值
  let shuju = $(this).data();
  // console.log(shuju); // { name: 'xx', alias: 'xx', id: 2 }
  // editIndex 表示当前的弹层；关闭弹层的时候，需要用到它
  editIndex = layer.open({
    type: 1,
    title: '编辑分类',
    content: $('#tpl-edit').html(),
    area: ['500px', '250px'],
    // 弹层弹出后的回调，不要和ajax中的success弄混了
    success: function () {
      // 数据回填(不要忘记id)
      $('#edit-form input[name="name"]').val(shuju.name);
      $('#edit-form input[name="alias"]').val(shuju.alias);
      $('#edit-form input[name="id"]').val(shuju.id);
      /*
			 * 如果你还记得layui快速回填数据的方法，完全可以使用
       */
    }
  });
});
// ----------------------- 编辑 （点击 确认修改，完成编辑） -----
$('body').on('submit', '#edit-form', function (e) {
  e.preventDefault();
  // 收集表单各项值
  var data = $(this).serialize();
  // ajax提交，完成修改
  axios.post(`/my/category/update`, data).then(res => {
    let {data: {status, message}} = res;
    if (status === 0) {
      layer.msg(message);
      renderCategory();
      layer.close(editIndex);
    }
  });
})